$(function () {
  // ********************************************************加载列表

  function list() {
    $.ajax({
      url: 'admin/links',
      success: function (res) {
        if (res.status == 0) {
          //获取信息成功 渲染页面
          // console.log(res.data);
          let str = "";
          $.each(res.data, function (i, item) {
            str += `
            <tr>
            <td>${item.id}</td>
            <td>
              <div class="bg">
                <img id='image' src="http://localhost:8888/uploads/${item.linkicon}">
              </div>
            </td>
            <td>${item.linkname}</td>
            <td>${item.linkurl}</td>
            <td>${item.linkdesc}</td>
            <td> <button type="button" class="layui-btn layui-btn-xs edit" _edit="${item.id}">
            编辑
          </button>
          <button _del="${item.id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">
            删除
          </button></td>
          </tr>          
            `
          })
          $('tbody').html(str)

        }
      }
    })
  }
  list();
  // *********************************************************添加友情链接
  let add_str = `
  <form id="add-form" class="layui-form" style="margin: 15px 30px 0 0">
      <!-- 第一行：密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接名称</label>
        <div class="layui-input-block">
          <input type="text" name="linkname" required lay-verify="required" placeholder="请输入链接名称" autocomplete="off" class="layui-input lk">
        </div>
      </div>
      <!-- 第二行：确认密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接地址</label>
        <div class="layui-input-block">
          <input type="text" name="linkurl"  placeholder="请输入链接地址" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第三行：链接描述 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接描述</label>
        <div class="layui-input-block">
          <input type="text" name="linkdesc"  placeholder="请输入链接描述" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第四行：上传图片 -->
      <div class="layui-form-item">
        <div class="layui-input-block icon-url">
          <button type="button" class="layui-btn layui-btn-sm" id="urlIcon">
            <i class="layui-icon">&#xe67c;</i>上传图片
          </button>
          <input type="file" name="linkicon" id="linkFile" style="display: none;">
          <img id="preIcon" src="">
        </div>
      </div>
      <!-- 第三行：按钮 -->
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn btn" lay-submit lay-filter="formDemo" >提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>`
  let layer = layui.layer
  let form = layui.form
  $('#add-link').click(function () {
    layer.open({ //利用layui框架核心功能 layer.open
      type: 1,
      title: '添加链接',
      arar: ['500px', '250px'],
      content: add_str,
      success: function (dom, index) {

        $('#urlIcon').click(function () {//提交图片按键设置
          $('#linkFile').click();
        })
        $('#linkFile').change(function () {
          let img = this.files[0]
          let src = URL.createObjectURL(img)
          $('#preIcon').cropper('replace', src)
        })
        $('.layui-form').submit(function (e) {
          e.preventDefault();
          let fd = new FormData(this);
          let canvas = $('#preIcon').cropper('getCroppedCanvas', {
            width: 100,  //#image 代表当前展示图片的区域标签对象
            height: 100  // width,height 任意设置的图片区域范围
          })

          canvas.toBlob(function (obj) {
            fd.set('linkicon', obj)
            $.ajax({
              url: 'admin/links',
              type: 'post',
              data: fd,
              processData: false,
              contentType: false,
              success: function (res) {
                console.log(res);
                layer.msg(res.message)
                if (res.status == 0) {
                  list();
                  layer.close(index)
                }
              }
            })
          })
        })


      }
    })
  })






  // *********************************************************删除友情链接
  $('tbody').on('click', '.delete', function () {
    let id = $(this).attr('_del')
    console.log(id);
    layer.confirm('是否确定删除', function (index) {
      $.ajax({
        url: 'admin/links/' + id,
        type: 'delete',
        success: function (res) {
          layer.msg(res.message)
          if (res.status == 0) {
            list();
            layer.close(index)
          }
        }
      })
    })
  })







  // **********************************************************编辑友情链接
  let edit_str = `<form id="edit-form" lay-filter='editForm' class="layui-form" style="margin: 15px 30px 0 0">
      <!-- 第一行：密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接名称</label>
        <div class="layui-input-block">
          <input type="text" name="linkname" required lay-verify="required" placeholder="请输入链接名称" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第二行：确认密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接地址</label>
        <div class="layui-input-block">
          <input type="text" name="linkurl" required  placeholder="请输入链接地址" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第三行：链接描述 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接描述</label>
        <div class="layui-input-block">
          <input type="text" name="linkdesc" required  placeholder="请输入链接描述" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第四行：上传图片 -->
      <div class="layui-form-item">
        <div class="layui-input-block icon-url">
          <button type="button" class="layui-btn layui-btn-sm" id="urlIcon">
            <i class="layui-icon">&#xe67c;</i>上传图片
          </button>
          <input type="file" id="linkFile" style="display: none;">
          <img id="preIcon" src="">
        </div>
      </div>
      <!-- 第三行：按钮 -->
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>`;
  $('tbody').on('click', '.edit', function () {
    let id = $(this).attr('_edit')
    layer.open({
      type: 1,
      title: '编辑友情链接',
      area: ['500px', '250px'],
      content: edit_str,
      success: function (dom, index) {
        $('#urlIcon').click(function () {//提交图片按键设置
          $('#linkFile').click();
        })
        $('#linkFile').change(function () {
          let img = this.files[0]
          let src = URL.createObjectURL(img)
          $('#preIcon').cropper('replace', src)
        })
        //根据id获取详情 并且进行赋值
        key(id);
        //提交功能
        edit(id, index)
      }
    })
  })
  //根据id进行快速赋值
  function key(i) {
    $.ajax({
      url: 'admin/links/' + i,
      success: function (res) {
        form.val('editForm', res.data)
      }
    })
  }

  //提交功能
  function edit(i, index) {
    $('.layui-form').submit(function (e) {
      e.preventDefault();
      let fd = new FormData(this);
      let canvas = $('#preIcon').cropper('getCroppedCanvas', {
        width: 100,  //#image 代表当前展示图片的区域标签对象
        height: 100  // width,height 任意设置的图片区域范围
      })
      canvas.toBlob(function (obj) {
        fd.append('linkicon', obj)
        $.ajax({
          url: 'admin/links/' + i,
          type: 'put',
          processData: false,
          contentType: false,
          data: fd,
          success: function (res) {
            layer.msg(res.message)
            if (res.status == 0) {
              list();
              layer.close(index)
            }
          }
        })
      })
    })
  }











})